<!DOCTYPE html>
 
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>SLIC | A Creative's Portfolio Theme</title>
	<link rel="stylesheet" href="css/styles.css">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic,700italic' rel='stylesheet' type='text/css'>
	<script src="js/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true
			});
		});
	</script>
	
	<script>
	jQuery(document).ready(function($) {
 
	$(".upclicks, .downclicks, .scroll").click(function(event){		
		event.preventDefault();
		$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
	});
});
</script>
<script src="js/jquery.quicksand.js"></script>
<script src="js/script.js"></script>
 
</head>




<body>
<div id="home"></div>
<header>
	<div class="container">
		<h1 class="headercontact">Send us an <a href="#">message</a>, Follow on <a href="#">Twitter</a>, Friend on <a href="#">Facebook</a></h1>
		<div class="headerlogo"><h1 class="logos logo1">Slic</h1>
		<h1 class="headersubtitle">Hey there, welcome to SLIC&#46;&#46;&#46;a courageously slick portfolio theme&#46;</h1>
		</div>
	</div>
</header>

<div id="slider">
	<div id="sliderbg">
		<div class="container">
			<div id="slides">
				<div class="slides_container">
					<a href="#" title="#"><img src="images/slider/sliderimage1.jpg" width="940" height="350" alt="Slide 1"></a>
					<a href="#" title="#"><img src="images/slider/sliderimage2.jpg" width="940" height="350" alt="Slide 2"></a>
					<a href="#" title="#" ><img src="images/slider/sliderimage3.jpg" width="940" height="350" alt="Slide 3"></a>
					<a href="#" title="#"><img src="images/slider/sliderimage4.jpg" width="940" height="350" alt="Slide 4"></a>
				</div>
				<a href="#" class="prev"><img src="images/slider/prev.png" width="11" height="16" alt="Arrow Prev"></a>
				<a href="#" class="next"><img src="images/slider/next.png" width="11" height="16" alt="Arrow Next"></a>
			</div>
		</div>
	</div>
</div>
<div id="aboutsection">
<div id="about">
	<div class="container">
		<div class="divide1"></div>
		<h1 class="logos logo2">Slic</h1>
		<ul class="navs nav1">
			<li><a href="#home" class="scroll">Home</a></li>
			<li><a href="#portfolio" class="scroll">Portfolio</a></li>
			<li><a href="#aboutsection" class="active scroll">About</a></li>
			<li><a href="#features" class="scroll">Features</a></li>
			<li><a href="#contact" class="scroll">Contact</a></li>
		</ul>
		<h2>We are Creative Folk.</h2>
		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut </p>
		<h1 class="upclicks up1" id="scroll">Head up one &uarr;</h1>
		<a href="#portfolio" class="downclicks down1" id="scroll">Head down one &darr;</a>
		<h1 class="teamtitle">The Team</h1>
		<article class="teammember1">
			<img src="images/team/team1.jpg" class="teamimage" alt="Team Member">
			<h1>Luke Spoor</h1>
			<h3 class="ocupation1">Design Specialist</h3>
			<a href="#" class="facebook socialbtn"><img src="images/team/social/facebook.png" alt="Facebook"></a>
			<a href="#" class="twitter socialbtn"><img src="images/team/social/twitter.png" alt="Twitter"></a>
			<a href="#" class="dribble socialbtn"><img src="images/team/social/dribble.png" alt="Dribble"></a>
			<a href="#" class="skype socialbtn"><img src="images/team/social/skype.png" alt="Skype"></a>
		</article>
		<article class="teammember1">
			<img src="images/team/team2.jpg" class="teamimage" alt="Team Member">
			<h1>Luke Spoor</h1>
			<h3 class="ocupation1">Web Engineer</h3>
			<a href="#" class="facebook socialbtn"><img src="images/team/social/facebook.png" alt="Facebook"></a>
			<a href="#" class="twitter socialbtn"><img src="images/team/social/twitter.png" alt="Twitter"></a>
			<a href="#" class="dribble socialbtn"><img src="images/team/social/dribble.png" alt="Dribble"></a>
			<a href="#" class="skype socialbtn"><img src="images/team/social/skype.png" alt="Skype"></a>
		</article>
		<article class="teammember1">
			<img src="images/team/team3.jpg" class="teamimage" alt="Team Member">
			<h1>Richard Tabor</h1>
			<h3 class="ocupation1">Web Developer</h3>
			<a href="#" class="facebook socialbtn"><img src="images/team/social/facebook.png" alt="Facebook"></a>
			<a href="#" class="twitter socialbtn"><img src="images/team/social/twitter.png" alt="Twitter"></a>
			<a href="#" class="dribble socialbtn"><img src="images/team/social/dribble.png" alt="Dribble"></a>
			<a href="#" class="skype socialbtn"><img src="images/team/social/skype.png" alt="Skype"></a>
		</article>
		<article class="teammember1">
			<img src="images/team/team4.jpg" class="teamimage" alt="Team Member">
			<h1>Richard Tabor</h1>
			<h3 class="ocupation1">Creative Director</h3>
			<a href="#" class="facebook socialbtn"><img src="images/team/social/facebook.png" alt="Facebook"></a>
			<a href="#" class="twitter socialbtn"><img src="images/team/social/twitter.png" alt="Twitter"></a>
			<a href="#" class="dribble socialbtn"><img src="images/team/social/dribble.png" alt="Dribble"></a>
			<a href="#" class="skype socialbtn"><img src="images/team/social/skype.png" alt="Skype"></a>
		</article>
	</div>
</div>
</div>

<div class="container">
	<div id="portfolio">
		<div class="divide2"></div>
			<h1 class="logos logo2">Slic</h1>
			<ul class="navs nav1">
				<li><a href="#home" class="scroll">Home</a></li>
				<li><a href="#portfolio" class="active scroll">Portfolio</a></li>
				<li><a href="#aboutsection" class="scroll">About</a></li>
				<li><a href="#features" class="scroll">Features</a></li>
				<li><a href="#contact" class="scroll">Contact</a></li>
			</ul>
		<a href="#about" class="upclicks up1" id="scroll">Head up one &uarr;</a>
		<a href="#features" class="downclicks down1" id="scroll">Head down one &darr;</a>
		<h2>Our Porfolio.</h2>
		<div class="filter">
			<h1 class="filtertitle">Filter:</h1>
		</div>
			
		<nav id="filter">
		
		</nav>
		<div class="portfoliocontainer">
		<ul id="stage">
			<li data-tags="Web Design">
				<img src="images/portfolio/work1.jpg" alt="" />
			</li>
			<li data-tags="Logo/Branding,Print Design">
				<img src="images/portfolio/work2.jpg" alt="" />
			</li>
			<li data-tags="Web Design,Logo/Branding">
				<img src="images/portfolio/work3.jpg" alt="" />
			</li>
			<li data-tags="Web Design,Print Design">
				<img src="images/portfolio/work4.jpg" alt="" />
			</li>
			<li data-tags="Logo/Branding">
				<img src="images/portfolio/work5.jpg" alt="" />
			</li>
			<li data-tags="Web Design,Video">
				<img src="images/portfolio/work6.jpg" alt="" />
			</li>
			<li data-tags="Web Design,Logo/Branding">
				<img src="images/portfolio/work7.jpg" alt="" />
			</li>
			<li data-tags="Print Design">
				<img src="images/portfolio/work8.jpg" alt="" />
			</li>
			<li data-tags="Video,Logo/Branding">
				<img src="images/portfolio/work9.jpg" alt="" />
			</li>
			<li data-tags="Web Design,Logo/Branding">
				<img src="images/portfolio/work10.jpg" alt="" />
			</li>
			<li data-tags="Print Design">
				<img src="images/portfolio/work11.jpg" alt="" />
			</li>
			<li data-tags="Video,Logo/Branding">
				<img src="images/portfolio/work12.jpg" alt="" />
			</li>
		</ul>
		</div>
	</div>
</div>
 

 <div class="container">
 	 <div id="features">
 		<div class="divide1"></div>
		<h1 class="logos logo3">Slic</h1>
		<ul class="navs nav1">
			<li><a href="#home" class="scroll">Home</a></li>
			<li><a href="#portfolio" class="scroll">Portfolio</a></li>
			<li><a href="#aboutsection" class="scroll">About</a></li>
			<li><a href="#features" class="active scroll">Features</a></li>
			<li><a href="#contact" class="scroll">Contact</a></li>
		</ul>
		
		<h2>Nifty HTML Features.</h2>
		<a href="#portfolio" class="upclicks up1" id="scroll">Head up one &uarr;</a>
		<a href="#contact" class="downclicks down1" id="scroll">Head down one &darr;</a>
		<h3 class="head1">Header One</h3>
		<h3 class="head2">Header Two</h3>
		<h3 class="head3">Header Three</h3>
		<h3 class="head4">Header Four</h3>
		<h3 class="head5">Header Five</h3>
		<h4 class="checklist">The Checklist</h4>
		<ul class="checknav">
			<li><a href="#">The first item is here</a></li>
			<li><a href="#">The second item is here</a></li>
			<li><a href="#">The third item is here</a></li>
			<li><a href="#">The forth item is here</a></li>
			<li><a href="#">The fifth item is here</a></li>
		</ul>
		<h4 class="checklist2">The Second Checklist </h4>
		<ul class="checknav2">
			<li><a href="#">The first item is here</a></li>
			<li><a href="#">The second item is here</a></li>
			<li><a href="#">The third item is here</a></li>
			<li><a href="#">The forth item is here</a></li>
			<li><a href="#">The fifth item is here</a></li>
		</ul>
		<div class="divide3"></div>
		<h4 class="columntitle1">A Set of Three Columns</h4>
		<h5 class="column1title">Column 1</h5>
		<p class="column1para">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi arc hitecto beatae vitae.</p>
		<h5 class="column2title">Column 2</h5>
		<p class="column2para">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi arc hitecto beatae vitae.</p>
		<h5 class="column2title">Column 3</h5>
		<p class="column2para">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi arc hitecto beatae vitae.</p>
		<div class="divide4"></div>
		<h4 class="columntitle2">A Set of Four Columns</h4>
		<h5 class="column4title">Column 1</h5>
		<p class="column4para">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
		<h5 class="column5title">Column 2</h5>
		<p class="column5para">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
		<h5 class="column5title">Column 3</h5>
		<p class="column5para">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
		<h5 class="column5title">Column 4</h5>
		<p class="column5para">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
		<div class="divide4"></div>
		<h4 class="columntitle3">Want to make it two columns instead?</h4>
		<h5 class="column7title">Column 1</h5>
		<p class="column7para">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi arc hitecto beatae vitae. Pellentesque id fringilla justo. Suspendisse ut suscipit nisl.</p>
		<h5 class="column8title">Column 2</h5>
		<p class="column8para">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi arc hitecto beatae vitae. Pellentesque id fringilla justo. Suspendisse ut suscipit nisl.</p>
		<div class="divide4"></div>
		<h4 class="wantbuttons">Here&#39;s some included 3-State Buttons</h4>
		<a href="#" class="button1 buttons">Submit it</a>
		<a href="#" class="button2 buttons">Submit it</a>
		<a href="#" class="button3 buttons">Submit it</a>
		<a href="#" class="button4 buttons">Submit it</a>
		<a href="#" class="button5 buttons">Submit it</a>
		<a href="#" class="button6 buttons">Submit it</a>
		<a href="#" class="button7 buttons">Submit it</a>
		<a href="#" class="button8 buttons">Submit it</a>
		<a href="#" class="button9 buttons">Submit it</a>
		<a href="#" class="button10 buttons">Submit it</a>
		<a href="#" class="button11 buttons">Submit it</a>
		<a href="#" class="button12 buttons">Submit it</a>
		<h4 class="completedbuttons">And here they are in action:</h4>
		<a href="#" class="button13 buttons">Submit it</a>
		<a href="#" class="button14 buttons">Submit it</a>
		<a href="#" class="button15 buttons">Submit it</a>
		<a href="#" class="button16 buttons">Submit it</a>
 	</div>
 </div>
 
 <div class="container">
	 <div id="contact">
	 	<div class="divide1"></div>
			<h1 class="logos logo3">Slic</h1>
			<ul class="navs nav1">
				<li><a href="#home" class="scroll">Home</a></li>
			<li><a href="#portfolio" class="scroll">Portfolio</a></li>
			<li><a href="#aboutsection" class="scroll">About</a></li>
			<li><a href="#features" class="scroll">Features</a></li>
			<li><a href="#contact" class="active scroll">Contact</a></li>
			</ul>
			<h2>Want to Get in Touch?</h2>
			<a href="#features" class="upclicks up1" id="scroll">Head up one &#8593;</a>
			<a href="#home" class="backtotop scroll">Back to top &#8593;</a>
			<p class="contactpara">Then send us a message! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
			<div class="divide5"></div>
			<h5 class="addresstitle">Address:</h5>
			<p class="addressline">123 Your Street City, State  12345</p>
			<div class="divide6"></div>
			<h5 class="contacttitle">Contact:</h5>
			<p class="contactline">123.456.7890 <a href="mailto:#">email@creative.com</a></p>
			<form id="contactform" method="post" action="send_mail.php">
				<input type="text" placeholder="enter your name&#46;&#46;&#46;" class="input1" name="name">
				<input type="email" placeholder="enter your email&#46;&#46;&#46;" class="input2" name="email_address">
				<textarea class="input3" placeholder="enter your message&#46;&#46;&#46;" name="message"></textarea>
				<input type="submit" value="Submit it" class="input4">
			</form>
			<a href="#"  class="contacttwitter contactbtn"><img src="images/contact/twitter.png" alt=""></a>
			<a href="#" class="contactfacebook contactbtn"><img src="images/contact/facebook.png" alt=""></a>
			<a href="#" class="contactdribble contactbtn"><img src="images/contact/dribble.png" alt=""></a>
			<a href="#" class="contactlinked contactbtn"><img src="images/contact/linkedin.png" alt=""></a>
			<a href="#" class="contactforrst contactbtn"><img src="images/contact/forrst.png" alt=""></a>
			<a href="#" class="contactrss contactbtn"><img src="images/contact/rss.png" alt=""></a>
	</div>
 </div>
 
 <footer>
 	<div id="footerbg">
 		<div class="container">
 			<h4 class="copyright">&copy; Copyright 2011 <a href="#">SLIC</a> on <a href="#">ThemeForest</a>.</h4>
 			<h4 class="footertext">You can find us chillin&#39; on <a href="#">Twitter</a>&#46;</h4>
 		</div>
 	</div>
 </footer>



</body>
</html>	